<template>
    <el-form
        :model="localFormData"
        label-width="80px"
        :rules="rules"
        :inline="true"
        class="seriesform"
        ref="extendsRef"
    >
        <el-form-item label="子集名称" prop="name">
            <el-input v-model="localFormData.name" placeholder="请输入子集名称"></el-input>
        </el-form-item>
        <el-form-item prop="definition" label="清晰度">
            <el-select v-model="localFormData.definition" placeholder="请选择清晰度" >
                <el-option
                v-for="item,index in definitionData"
                :key="index"
                :label="item"
                :value="parseInt(index)">{{item}}
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item prop="pushtype" label="推流类型">
            <el-select v-model="localFormData.pushtype" placeholder="请选择推流类型" >
                <el-option
                v-for="item,index in pushtypeData"
                :key="index"
                :label="item"
                :value="parseInt(index)">{{item}}
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item prop="reservetime" label="预约时间">
            <el-date-picker
                v-model="localFormData.reservetime"
                type="datetime"
                placeholder="请选择预约时间"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                :disabledDate="disabledDate"
            >
            </el-date-picker>
        </el-form-item>
        <el-form-item prop="videolayout" label="视频布局">
            <el-radio-group v-model="localFormData.videolayout">
                <el-radio label="horizontal">横屏</el-radio>
                <el-radio label="vertical">竖屏</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="垫片" class="dpformitem">
            <el-tag
                v-for="tag in localFormData.selectGaskets"
                :key="tag"
                class="mx-1"
                closable
                :disable-transitions="false"
                @close="handleTagClose(tag)"
            >
                {{ tag.name }}
            </el-tag>
            <el-button type="primary" class="button-new-tag ml-1" size="small" @click="handleVideoList">
                选择垫片
            </el-button>
        </el-form-item>
        <media-thumb :formData="localFormData" />
        <el-form-item prop="cpid" label="内容提供方">
            <el-select v-model="localFormData.cpid" placeholder="请选择内容提供方"
                @change="handleCpChange" clearable
                @clear="handleClear('cp')" :disabled="cpidDisabled">
                <el-option v-for="item in mediaCpList" :key="item.cpid" :label="item.name" :value="item.cpid">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="来源ID" prop="sourceid">
            <el-input v-model="localFormData.sourceid" placeholder="请输入来源ID" :disabled="sourceidDisabled"></el-input>
        </el-form-item>
        <el-form-item label="付费类型" prop="paytype">
            <el-switch
                v-model="localFormData.paytype"
                active-color="#ff4949"
                inactive-color="#13ce66"
                :active-value="1"
                :inactive-value="0"
                active-text="付"
                inactive-text="免"
                inline-prompt
                :disabled="paytypeReadonly"
            />
        </el-form-item>
        <el-form-item prop="abstract" label="子集简介" class="txtareabox">
            <el-input
                v-model="localFormData.abstract"
                maxlength="255"
                show-word-limit
                type="textarea"
                placeholder="请输入子集简介"
            ></el-input>
        </el-form-item>
        <el-form-item prop="content" label="子集详情" class="txtareabox">
            <el-input v-model="localFormData.content" type="textarea" placeholder="请输入子集详情"></el-input>
        </el-form-item>
        <!--<el-divider></el-divider>-->
        <template v-for="item,index in localFormData.anchors" :key="index">
            <el-row justify="space-between">
                <el-col :span="4" class="mediatitle">主播{{index+1}}</el-col>
                <el-col :span="4" class="right">
                    <el-button @click="handleDelImage(index)" size="mini" class="tjbtn">
                        <el-icon><delete /></el-icon>
                        <span>删除</span>
                    </el-button>
                </el-col>
            </el-row>
            <el-row class="tjbox mt15">
                <el-col :span="24">
                    <el-form-item label="类型">
                        <el-select v-model="item.idtype" placeholder="请选择类型" >
                            <el-option
                            v-for="item,index in idTypeData"
                            :key="index"
                            :label="item"
                            :value="parseInt(index)">{{item}}
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="卡号">
                        <el-input v-model="item.idnum" placeholder="请输入卡号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="姓名">
                        <el-input v-model="item.fullname" placeholder="请输入姓名"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="认证编号">
                        <el-input v-model="item.certno" placeholder="请输入认证编号"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-divider></el-divider>
        </template>
    </el-form>
    <!--<el-button @click="handleAddAnchor" class="btn-add">添加主播</el-button>-->
    <rel-video-medium
        ref="selectVideoRef"
        :dialogRelVideoVisible="selectVideoDialog"
        :dialogRelVideoTitle="selectVideoTitle"
        :dialogRelVideoFormData="selectVideoFormData"
        dialogRelAction="createseries"
        dialogSelectType="radio"
        @handleCancelVideoDialog="selectVideoCancelDialog"
        @reloadMediaData="selectVideoComplete"
    />
</template>

<script>
    import {  ref, toRef, reactive, nextTick, computed } from 'vue'
    import {Delete} from '@element-plus/icons'
    import RelVideoMedium from '../../../media/components/Medium/RelVideoMedium'
    import { getCps } from "@/api/cp"
    import MediaThumb from '@/views/media/media/components/EditExtends/MediaThumb'
    export default {
        name: "",
        components: {
            Delete,
            RelVideoMedium,
            MediaThumb
        },
        props: {
            formData: {
                type: Object
            },
            toChildData: {
                type: Object
            },
        },
        setup(props) {
            const localFormData = toRef(props, 'formData')
            localFormData.value.paytype = 0
            const extendsRef = ref('')
            // 主播类型数据
            const idTypeData = ref({1:'身份证'})
            const definitionData = ref({1:"标清",2:"高清",3:"超高清"})
            const pushtypeData = ref({1:"流畅",2:"普通"})
            const rules = reactive({
                name: { required: true, message: '请输入子集名称', trigger: 'blur' },
                reservetime: {required: true, message: '请选择预约时间', trigger: 'blur'},
                definition: {required: true, message: '请选择清晰度', trigger: 'change'},
                pushtype: {required: true, message: '请选择推流类型', trigger: 'change'},
                videolayout: {required: true, message: '请选择视频布局', trigger: 'change'},
            })

            // 添加主播方法
            const handleAddAnchor = () => {
                localFormData.value.anchors.push({
                    idtype:1,
                    fullname: '',
                    idnum: ''
                })
            }
            // 删除主播
            const handleDelImage = (key) => {
                localFormData.value.anchors.splice(key,1)
            }

            // 视频弹窗
            const handleVideoList = () => {
                selectVideoDialog.value = true
                nextTick(() => {
                    selectVideoRef.value.init()
                })
            }
            const handleTagClose = (tag) => {
                localFormData.value.selectGaskets.splice(localFormData.value.selectGaskets.indexOf(tag), 1)
                localFormData.value.gaskets.splice(localFormData.value.gaskets.indexOf(tag.videoid),1)
                // console.log(localFormData.value.gaskets)
            }
            const selectVideoRef = ref(null)
            const selectVideoDialog = ref(false)
            const selectVideoTitle = ref('选择封面')
            const selectVideoFormData = reactive({
                datas:[]
            })
            const selectVideoCancelDialog = () => {
                selectVideoDialog.value = false
            }
            const selectVideoComplete = (data) => {
                // console.log(data)
                if( data && data.length > 0 ){
                    localFormData.value.selectGaskets = []
                    localFormData.value.gaskets = []
                    data.forEach((val) => {
                        if(val.errcode == 0){
                            localFormData.value.selectGaskets.push({videoid:val.data.videoid,name:val.data.name,type:'success'})
                            localFormData.value.gaskets.push(val.data.videoid)
                        }
                    })
                    
                }
                // Object.assign(localFormData.value.thumb,)
            }

            const disabledDate = (date) => {
                if( date.getTime() < (new Date().getTime()-24*60*60*1000) ){
                    return true
                }
            }
            // 内容提供方
            const cpidDisabled = ref(false)
            const sourceidDisabled = ref(true)
            const mediaCpList = ref([])
            getCps({ pagesize: 1000 }).then(response => {
                if (response.errcode == 0) {
                    mediaCpList.value = response.data.list
                } else {
                    console.log(response)
                }
            })
            const handleCpChange = () => {
                localFormData.value.sourceid = ''
                sourceidDisabled.value = false
            }
            const handleClear = (clearname) => {
                switch (clearname) {
                    case 'cp':
                        sourceidDisabled.value = true
                        localFormData.value.sourceid = ''
                        break
                }
            }

            // 封面
            localFormData.value.thumb = []

            const localChildData = toRef(props, 'toChildData')
            const paytypeReadonly = computed(() => localChildData.value.paytype == 0 ? true : false)
            return {
                localFormData,
                extendsRef,
                idTypeData,
                definitionData,
                pushtypeData,
                rules,
                handleAddAnchor,
                handleDelImage,
                handleVideoList,
                handleTagClose,
                selectVideoRef,
                selectVideoDialog,
                selectVideoTitle,
                selectVideoFormData,
                selectVideoCancelDialog,
                selectVideoComplete,
                disabledDate,
                cpidDisabled,
                sourceidDisabled,
                mediaCpList,
                handleCpChange,
                handleClear,
                paytypeReadonly
            }
        }
    }
</script>

<style scoped  lang="scss">
    .btn-add{
        width:85%;
        background-color: rgba(222,222,222,0.4);
        color:#3D73F2;
        height: 60px;
        display: block;
        margin:30px auto;
        border:0 !important;
        font-weight: bold;
    }
    .el-divider--horizontal{
        margin:0 0 15px;
    }
    .el-divider{
        border-top: 1px dashed #ddd;
        background-color: transparent;
    }
    .el-tag{margin-right: 5px;}
    .tjbox{
        .el-form-item{
            width:60% !important;
        }
    }
</style>
<style lang="scss">
    .dpformitem{
        .el-form-item__content{
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }
    }
</style>